<template>
    <!-- 订单信息展示组件 -->
    <div class="top-panel">
        <el-card>
            <el-form :model="searchForm" label-width="70px" label-position="right">
                <el-row>
                    <el-col :span="4">
                        <el-form-item label="id" label-width="30px">
                            <el-input v-model="searchForm.id" clearable @keyup.enter="loadDataList">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属用户id" label-width="110px">
                            <el-input v-model="searchForm.userId" clearable @keyup.enter="loadDataList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3" :style="{ paddingLeft: '40px' }"><el-button type="success"
                            @click="loadDataList()">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
    <el-card class="table-data-card">
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <template #slotStatus="{ row }">
                <div v-if="row.status == 1" style="color: black;">未付款</div>
                <div v-if="row.status == 2" style="color: coral;">已付款未发货</div>
                <div v-if="row.status == 3" style="color: aquamarine;">已发货未确认</div>
                <div v-if="row.status == 4" style="color: blue;">已确认交易完成</div>
                <div v-if="row.status == 5" style="color: brown;">取消订单</div>
            </template>
            <template #slotOperation="{ row }">
                <el-dropdown placement="bottom-end" trigger="click">
                    <span class="iconfont icon-caozuo"></span>
                    <template #dropdown>
                        <el-dropdown-item @click="showDetail(row)">查看详情</el-dropdown-item>
                        <el-dropdown-item @click="changeStatus(row.id, 5)"
                            v-if="row.status == 1">取消订单</el-dropdown-item>
                        <el-dropdown-item @click="changeStatus(row.id, 3)"
                            v-if="row.status == 2">安排发货</el-dropdown-item>
                    </template>
                </el-dropdown>
            </template>
        </Table>
    </el-card>
    <OrderDetailDialog ref="orderDetailDialogRef" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import OrderDetailDialog from "@/components/OrderDetailDialog.vue";
const orderDetailDialogRef = ref(null);

const showDetail = async (row) => {
    // 获取订单详情
    let result = await proxy.Request({
        url: proxy.Api.queryOrderDetail + row.id,
    })
    if (!result) {
        return;
    }
    orderDetailDialogRef.value.show(result.data)
}

const changeStatus = async (id, status) => {
    let result = await proxy.Request({
        method: "put",
        url: proxy.Api.updateOrderStatus + id + "/" + status,
    })
    if (!result) {
        return;
    }
    proxy.Message.success("操作成功")
    loadDataList()
}

const tableData = ref({
    pageNo: 1,
    pageSize: 15,
})
const tableOptions = {}
const searchForm = ref({})

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize
    }
    params = Object.assign(params, searchForm.value)
    let result = await proxy.Request({
        url: proxy.Api.queryOrderByPage,
        params: params
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result.data)
    tableData.value.totalCount = result.data.total
}

const columns = [
    {
        label: 'id',
        prop: 'id',
        width: 180
    },
    {
        label: '所属用户id',
        prop: 'userId',
    },
    {
        label: '总价(分)',
        prop: 'totalFee',
    },
    {
        label: '状态',
        prop: 'status',
        scopedSlots: 'slotStatus',
        width: 130
    },
    {
        label: '创建时间',
        prop: 'createTime',
    },
    {
        label: '支付时间',
        prop: 'payTime',
    },
    {
        label: '发货时间',
        prop: 'consignTime',
    },
    {
        label: '完成时间',
        prop: 'finishedTime',
    },
    {
        label: '更新时间',
        prop: 'updateTime',
    },
    {
        label: '操作',
        prop: 'operation',
        width: 100,
        scopedSlots: 'slotOperation'
    },
]

</script>

<style lang="scss" scoped>
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
